<template>
  <div class="wrapper">
    <mu-list toggle-nested>
      <template v-for="(item, index) in quotaList">
        <mu-list-item
          button
          :ripple="false"
          nested
          :open="open === 'send'"
          :key="item.id"
        >
          <mu-list-item-title>
            {{item.title}}
            <mu-badge v-if="item.abnormal" :content="String(item.abnormal)" color="red400" :circle="true"></mu-badge>
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-icon class="toggle-icon" value="keyboard_arrow_down"></mu-icon>
          </mu-list-item-action>
          <mu-list-item
            class="nested-list"
            :ripple="false"
            slot="nested"
            v-for="detail in item.detail"
            :key="detail.id"
          >
            <mu-list-item-title>
              <div v-if="item.identify===1" class="check-single-wrapper">
                <div class="check-value">
                    <span v-if="detail.name">{{detail.name}}:</span>
                    <span class="check-figure">
                      <em class="mark" v-if="detail.isNormal===1">↑</em>
                      <em class="mark" v-else-if="detail.isNormal===-1">↓</em>
                      {{detail.figure}}
                    </span>
                </div>
                <div class="check-refRange">参考范围：{{detail.range}}</div>
              </div>
              <div v-else class="check-multi-wrapper">
                <img
                  v-if="detail.imageUrl"
                  class="check-image"
                  :src="detail.imageUrl[0]"
                  @click="handleClick(detail.imageUrl)"
                >
                {{detail.figure}}
              </div>
            </mu-list-item-title>
          </mu-list-item>
        </mu-list-item>
        <mu-divider :key="index"></mu-divider>
      </template>
    </mu-list>
  </div>
</template>

<script>
export default {
  name: 'SynQuota',
  props: {
    quotaList: Array
  },
  data () {
    return {
      open: ''
    }
  },
  methods: {
    handleClick (data) {
      this.$emit('handleShowGallary', data)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper >>> .mu-item
    height: auto
    min-height: .96rem
  .nested-list >>> .mu-item
    margin-left: 5px!important
  .mu-item-title
    height: auto
    line-height: 1
    .check-image
      width: 100%
  .toggle-icon
    color: rgba( 0, 0, 0, .54)
    transition: transform .3s cubic-bezier(.23,1,.32,1)
  .mu-item__open
    .toggle-icon
      transform: rotate(180deg)
  .mu-item-action
    min-width: .56rem;
  .mu-badge-container
    float: right
  .check-single-wrapper
    overflow: hidden
    display: flex
    justify-content: space-between
    font-size: .28rem
    width: 100%
    .check-value
      flex: 1
      .check-figure
        font-size: .26rem
        .mark
          color: #ff1744
          margin-right: .02rem
          font-weight: 700
    .check-refRange
      color: #9e9e9e
      font-size: .24rem
  .check-multi-wrapper
    white-space: normal
    color: #666
    font-size: .28rem
    line-height: 1.35
</style>
